<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<%@ include file="../common/required.jspf" %>
		<meta charset="utf-8" />
		<title>网上书城-书籍详细</title>
		<link rel="stylesheet" type="text/css" href="${ctx}/statics/common/vendor/normalize.min.css" />
		<!-- 可选 -->
		<link rel="stylesheet" href="${ctx}/statics/common/vendor/font-awesome/css/font-awesome.min.css" />
		<!-- 可选 -->
		<link rel="stylesheet" href="${ctx}/statics/common/vendor/swiper/swiper.min.css" />
		<link rel="stylesheet" href="${ctx}/statics/store/css/common.css" />
		<link rel="stylesheet" href="${ctx}/statics/store/css/info.css" />
		<!-- 苹果设备在桌面上生成的快捷图标 -->
		<link rel="apple-touch-icon" href="${ctx}/statics/store/img/apple-touch-icon.png">
		<link rel="icon" href="${ctx}/favicon.ico">
		<script src="${ctx}/statics/common/vendor/jquery.min.js"></script>
		
	</head>

	<body>
		<%@ include file="../common/header.jspf" %>
		<section style="width: 100%; height: .6rem;"></section>

		<section class="info-wrapper">
			<div class="content">
				<div class="content-top">
					<div class="top-left">
						<img id = "imgSrc" src="${ctx}/statics/store/img/${product.pic}"/>
					</div>
					<div class="top-right">
						<p class="title">${product.name }</p>
						<p class="details">${product.description }</p>
						<p class="price">价格:<span>￥${product.price }</span></p>
					</div>
				</div>

				<div class="content-bottom">
					<div class="bottom-text" style="line-height: .3rem">
						<span>购买数量:</span>
					</div>
					<div class="bottom-inner">
						<div id="min" class="inner-Reduction">-</div>
						<input id = "count" class="input" type="text" style="width: 1.2rem;height: .3rem;border: none;text-align: center;color: #990000;font-size: .16rem;font-weight: bold;position: absolute;top: 0;left: 21%;" value="0" />
						<div id="add" class="inner-plus">+</div>
				
					</div>
						<p style="line-height: .5rem;">总价：<label style="color:red;" id="total"></label>元</p>
				</div>
			</div>

			<div class="container">

				<p class="container-title">详细说明</p>
				<p class="container-details">沪江英语网是免费的英语学习网站,提供白加得151的英文怎么说信息,包含白加得151的英文怎么说的相关学习资料、单词测试、评论、学习推荐等信息。</p>
				<div class="container-img">
					<img src="${ctx}/statics/store/img/product1.png" style="width: 9rem;max-height: 7.5rem;" />
				</div>

			</div>

			<div style="width: 100%; height: .5rem;"></div>
			<div class="plus-shopcar">
				<a id = "addCart"  >加入购物车</a>
			</div>
			<div id="msg">已成功加入购物车！</div> 
		</section>
		
		<script src="${ctx }/statics/store/js/resize.js"></script>
		<script src="${ctx }/statics/common/vendor/zepto.min.js"></script>
		<script src="${ctx }/statics/common/vendor/swiper/swiper-3.4.0.jquery.min.js"></script>
		<script src="${ctx }/statics/common/vendor/swiper/swiper.animate1.0.2.min.js"></script>
		<script src="${ctx }/statics/common/vendor/hammer.min.js"></script>
		<script>
			$(function(){
				var c = $("#count");
				
				setTotal();
				var offset = $("#end").offset();
				$("#add").click(function(){
					 yy = c.val(parseInt(c.val())+1);
					  setTotal();
					  console.info(parseInt(c.val()));
				});
				$("#min").click(function(){
					xx = c.val(parseInt(c.val())-1);
					if(parseInt(c.val()) < 0){
						c.val(0);
					}
					  setTotal();
				});
				function setTotal(){
					 $("#total").html((parseInt(c.val())*235).toFixed(2));
				}
				$("#addCart").click(function(){
					<%-- var id = '<%=Session["UserName"] %>'; --%>
					var id = '${user.id}';
					
					if(id == null || id == ""){
						alert('您未登录，请先登录！');
					}else{
						var count = Number(c.val());
						if(count == 0){
							alert("数量不能为0！");
						}else{
							$.post('<%=request.getContextPath()%>/store/shopping/addToCart.action',{productId : '${product.id}',count : count},
								function(data){
								if(confirm("添加成功，立即前往购物车？")){
									location = '${ctx }/store/shopping/listShoppingCart.action';
								}	
							})
						}
					}
				})
			});
			
			
		</script>
	</body>

</html>